<template>
  <el-form-item class="edit-wrapper" :label="label">
    <div v-show="show" class="show-value"  @click="edit">
      <div v-html="cloneValue" style="text-align: justify"></div>
      <span class="el-icon-edit"></span>
    </div>
    <el-input
      v-show="!show"
      @blur="blur"
      v-model="cloneValue"
      :suffix-icon="loading"
      @input="updateValue"
      ref="input"
    ></el-input>
    <input ref="ipt" hidden :name="name"/>
  </el-form-item>
</template>

<script>
  export default {
    data () {
      return {
        show: true,
        loading: '',
        cloneValue: this.value
      }
    },
    props: {
      label: String,
      value: [String, Number],
      name: String
    },
    watch: {
      value () {
        this.cloneValue = this.value
      }
    },
    methods: {
      updateValue (val) {
        let input = this.$refs.ipt
        input && (input.value = val)
        this.$emit('input', val)
      },
      blur () {
        this.loading = 'el-icon-loading'
        setTimeout(() => {
          this.edit()
        }, 100)
      },
      edit () {
        this.loading = ''
        this.show = !this.show
        this.$nextTick(() => {
          this.$refs.input.focus()
        })
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.show-value{
  cursor: pointer;
  position: relative;
  padding-right: 25px;
  padding-left: 16px;
  .el-icon-edit{
    position: absolute;
    right: 4px;
    top: 13px;
    display:none;
  }
}
.show-value:hover{
  .el-icon-edit{
    display: block;
  }
}
.edit-wrapper{
  margin-bottom: 0;
  .el-form-item__label{
    color: #aaa;
    font-weight: 300;
  }
}
</style>
